<template>
	<view :class="'article-list-box article-list-'+set.showType">
		<view class="article-list" v-for="list in data" v-if="list.img.length" @click="navto('pages/index/content?id='+list.id)">
			<view class="article-img">
				<image  mode="aspectFill"
				:src="list.img" 
				 ></image>
			 </view>
			 <view v-if="set.showType==2" style="display: flex;flex-direction: column;">
				 <text class="u-line-2 article-title" >{{list.title}}</text>
				 <text class="u-line-2 article-title" style="color: #939393;">{{list.desc}}</text>
			 </view>
			 <text class="u-line-2 article-title" v-else>{{list.title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"diy-article-list",
		data() {
			return {
				
			};
		},props:{
			set:{
				type:Object,
				default(){
					return {
						showType:1,
						content:[2233,2234],
						data:[]
					}
				}
			}
		},created() {
			if(this.set.content.length){
				let self = this;
				this.moxiPost('/index/app/get_content',{id:this.set.content},function(data){
					self.data = data.data.data;
				},false)
			}
		}
	}
</script>

<style lang="scss">
	.article-list-1{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		.article-list{
			border-radius: 5px;overflow: hidden;box-shadow: 0 2px 4px 2px #ccc;
			background-color: #fff;;
			display: flex;flex-direction: column;
			margin: 15rpx;
		
		}
		.article-img{
			height: 330rpx;
			image{
				width:330rpx;height: 330rpx
			}
		}
		.article-title{font-size: 14px;color: #666;margin:8px 5px;}
		
	}
	.article-list-2{
		display: flex;
		flex-direction: column;
		
		.article-list{
			border-radius: 5px;overflow: hidden;box-shadow: 0 2px 4px 2px #ccc;
			background-color: #fff;;
			display: flex;flex-direction: row;
			margin: 15rpx;
			
		}
		.article-img{
			width: 200rpx;
			height: 200rpx;
			flex: 0 0 200rpx;
			image{
				width: 100%;height: 100%
			}
		}
		.article-title{font-size: 14px;color: #666;margin:8px 5px;}
		
	}
</style>